<template>
  <div class="pickcity">
    <!-- <div class="left">
      <li v-for="item in province" v-bind:key="item.id" @click="showcity(item.ProID)">{{item.name}}</li>
    </div>
    <div class="right">
      <li v-for="item in city" v-bind:key="item.id" v-show="item.ProID == ProID">{{item.name}}</li>
    </div> -->
    <div class="submit">确认</div>
    <div class="cancel">取消</div>
  </div>
</template>

<script>
import "animate.css";
import province from "../data/province.json";
import city from "../data/city.json";

export default {
  data() {
    return {
      province: province,
      city: city,
      ProID: "2"
    };
  },
  created() {},
  methods: {
    showcity(ProID) {
      this.ProID = ProID;
      // console.log(123)
    }
  }
};
</script>

<style lang="scss" scoped>
.pickcity {
  width: 100vw;
  // height: 150vh;
  position: relative;
  .left,
  .right {
    position: relative;
    width: 50vw;
    border: 1px solid red;
    li {
      width: 50vw;
      height: 5vh;
      color: #555555;
      display: -webkit-flex;
      display: flex;
      -webkit-align-items: center;
      align-items: center;
      -webkit-justify-content: center;
      justify-content: center;
    }
  }
  .submit {
    width: 50vw;
    height: 10vh;
    position: absolute;
    bottom: 100px;
    // top: 100px;
    right: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: greenyellow;
  }
  .cancel {
    width: 50vw;
    height: 10vh;
    position: fixed;
    bottom: 0px;
    left: 0;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    background: greenyellow;
  }
}
</style>